<!-- 系统系统参数 -->
<template>
  <div class="">
    <el-card>
      <el-row style="margin-bottom: 5px"> </el-row>
      <el-col :span="24">
        <el-button type="primary" @click="addParam" size="mini" v-has="'add'"
          >添加参数</el-button
        >
      </el-col>
      <yg-table
        :columns="columns"
        :tableList="TableList"
        :loading="loadingShow"
        :height="'750'"
      >
        <el-table-column slot="action" fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="editSystem(scope.row)"
              size="mini"
              v-has="'edit'"
            ></el-button>
            <el-button
              v-if="scope.row.deletable === 1 ? true : false"
              type="danger"
              icon="el-icon-delete"
              slot="reference"
              circle
              @click="delectParam(scope.row)"
              size="mini"
              v-has="'del'"
            ></el-button>
          </template>
        </el-table-column>
      </yg-table>
    </el-card>
    <!-- 添加Param弹窗 -->
    <el-dialog
      title="添加参数"
      :visible.sync="addParamDialogVisible"
      width="50%"
      @close="addParamDialogClose"
      :close-on-click-modal="false"
    >
      <yg-from
        ref="addParamForm"
        :formObj="addParamFromObj"
        :formData="addParamFromData"
      ></yg-from>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addParamDialogVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="addParamConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 修改系统参数信息 -->
    <el-dialog
      title="修改系统参数"
      :visible.sync="editSystemDialogVisible"
      width="50%"
      :close-on-click-modal="false"
    >
      <yg-from
        ref="editSystemForm"
        :formObj="editSystemFromObj"
        :formData="editSystemFromData"
      ></yg-from>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="editSystemDialogVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="editSystemConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import YgTable from "@/components/Table/YgTable.vue";
import YgFrom from "@/components/Form/YgFrom.vue";
import {
  setMessageCallback,
  publishMsg,
  removeMessageCallback,
  checkSpecialId,
} from "@/mqtt";
export default {
  name: "ParamSystem",
  components: {
    YgTable,
    YgFrom,
  },
  data() {
    //这里存放数据
    return {
      loadingShow: false,
      addParamDialogVisible: false, //添加参数弹窗显隐
      editSystemDialogVisible: false, //修改系统参数信息
      columns: [
        {
          prop: "id",
          label: "数据id",
          align: "left",
        },
        {
          prop: "name",
          label: "名称",
          align: "left",
        },
        {
          prop: "desc",
          label: "描述",
        },
        {
          prop: "value",
          label: "值",
        },
        {
          prop: "unit",
          label: "单位",
        },
        {
          prop: "update_time",
          label: "更新时间",
        },
        { slot: "action" },
      ],
      TableList: [],
      addParamFromObj: [
        {
          input: true, //是input
          label: "数据ID", //字段
          prop: "id", //字段名
          width: 12, //参考el-col
          placeholder: "请输入数据ID",
          disabled: false, //是否禁用
          labelWidth: "80px",
          rules: [
            {
              required: true,
              message: "请输入ID名称",
            },
          ],
        },
        {
          input: true, //是input
          label: "名称", //字段
          prop: "name", //字段名
          width: 12, //参考el-col
          placeholder: "请输入名称",
          disabled: false, //是否禁用
          labelWidth: "80px",
        },
        {
          input: true, //是input
          label: "描述", //字段
          prop: "desc", //字段名
          width: 12, //参考el-col
          placeholder: "请输入描述",
          disabled: false, //是否禁用
          labelWidth: "80px",
        },
        {
          input: true, //是input
          label: "值", //字段
          prop: "value", //字段名
          width: 12, //参考el-col
          placeholder: "请输入值",
          disabled: false, //是否禁用
          labelWidth: "80px",
          rules: [
            {
              required: true,
              message: "请输入值",
            },
          ],
        },
        {
          input: true, //是input
          label: "单位", //字段
          prop: "unit", //字段名
          width: 12, //参考el-col
          placeholder: "请输入单位",
          disabled: false, //是否禁用
          labelWidth: "80px",
        },
      ],
      addParamFromData: {
        id: "",
        name: "",
        desc: "",
        value: "",
        unit: "",
      },
      editSystemFromObj: [
        {
          input: true, //是input
          label: "数据ID", //字段
          prop: "id", //字段名
          width: 12, //参考el-col
          placeholder: "请输入数据ID",
          disabled: true, //是否禁用
          labelWidth: "80px",
        },
        {
          input: true, //是input
          label: "名称", //字段
          prop: "name", //字段名
          width: 12, //参考el-col
          placeholder: "请输入名称",
          disabled: false, //是否禁用
          labelWidth: "80px",
        },
        {
          input: true, //是input
          label: "描述", //字段
          prop: "desc", //字段名
          width: 12, //参考el-col
          placeholder: "请输入描述",
          disabled: false, //是否禁用
          labelWidth: "80px",
          rules: [
            {
              required: true,
              message: "请输入描述",
            },
          ],
        },
        {
          input: true, //是input
          label: "值", //字段
          prop: "value", //字段名
          width: 12, //参考el-col
          placeholder: "请输入值",
          disabled: false, //是否禁用
          labelWidth: "80px",
          rules: [
            {
              required: true,
              message: "请输入值",
            },
          ],
        },
      ],
      editSystemFromData: {
        id: "",
        name: "",
        desc: "",
        value: "",
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    addParam() {
      this.addParamDialogVisible = true;
    },
    editSystem(val) {
      this.editSystemDialogVisible = true;
      this.editSystemFromData.id = val.id;
      this.editSystemFromData.name = val.name;
      this.editSystemFromData.desc = val.desc;
      this.editSystemFromData.value = val.value;
    },
    delectParam(id) {
      //console.log("删除参数", id);
      this.$confirm(
        `将要删除id为:${id.id} 名称为:${id.name} 的系统参数吗？是否确定删除?`,
        "删除参数",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let newMsg = {
            webMsgType: 1018,
            funCode: 3,
          };
          newMsg.data = { id: id.id };
          publishMsg(newMsg);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    addParamConfirm() {
      if (this.$refs.addParamForm.submitForm()) {
        let newMsg = {
          webMsgType: 1018,
          funCode: 2,
        };
        let val = this.addParamFromData.value;
        if (!isNaN(Number(val))) {
          this.addParamFromData.value = Number(val);
        }
        newMsg.data = this.addParamFromData;
        publishMsg(newMsg);
      }
    },
    addParamDialogClose() {
      this.$refs.addParamForm.resetForm();
    },
    editSystemConfirm() {
      if (this.$refs.editSystemForm.submitForm()) {
        let newMsg = {
          webMsgType: 1018,
          funCode: 1,
        };
        let val = this.editSystemFromData.value;
        if (!isNaN(Number(val))) {
          this.editSystemFromData.value = Number(val);
        }

        newMsg.data = this.editSystemFromData;
        console.log(newMsg);
        publishMsg(newMsg);
        this.editSystemDialogVisible = false;
      }
    },
    onMessage(topic, msg) {
      // this.YgHome.onMessage(topic, msg);
      // console.log("正在监听--System页面数据");
      // console.log(topic, msg);
      switch (msg.webMsgType) {
        case 1018:
          switch (msg.funCode) {
            case 0:
              if (msg.retCode != 0 || !msg.data) {
                this.$message.error(msg.retMsg);
              } else {
                this.TableList = msg.data;
                this.loadingShow = false;
              }
              break;
            case 1:
              if (checkSpecialId(msg)) {
                if (msg.retCode != 0) {
                  this.$message.error(msg.retMsg);
                } else {
                  this.$message.success("更新系统参数信息成功");
                }
              }
              break;
            case 2:
              if (checkSpecialId(msg)) {
                if (msg.retCode != 0) {
                  this.$message.error(msg.retMsg);
                } else {
                  this.$message.success("添加系统参数信息成功");
                  this.addParamDialogVisible = false;
                }
              }
              break;
            case 3:
              if (checkSpecialId(msg)) {
                if (msg.retCode != 0) {
                  this.$message.error(msg.retMsg);
                } else {
                  this.$message("删除系统参数成功!");
                }
              }
              break;
            default:
              break;
          }
          break;
        default:
          break;
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    //this.Onmessage();
    setMessageCallback(this.onMessage);
    //console.log("系统参数页面请求消息");
    publishMsg({
      webMsgType: 1018,
      funCode: 0,
    });
    this.loadingShow = true;
    //console.log("System页面请求消息 完成");
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforedestroy() {}, //生命周期 - 销毁完成
  destroyed() {
    removeMessageCallback(this.onMessage);
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-card__body {
  padding: 5px 5px 5px 5px;
}
</style>

</style>